<template>
    <div class="menu_table">
        <!-- 按钮布局 -->
        <div class="btnContainer">
            <el-button class="btn-class" type="primary" @click="addItem">新增</el-button>
        </div>
        <!-- -------------------------- -->
        <!-- table布局 -->
        <div class="tableContainer">
            <el-table border :data="tableList" highlight-current-row @current-change="handleCurrentChange">
                <el-table-column type="index" width="50" align="center" label="序号" property="num"></el-table-column>
                <el-table-column label="资源名称" property="resource_name"></el-table-column>
                <el-table-column label="资源url" property="resource_url"></el-table-column>
                <el-table-column label="验证权限" property="check_auth_name" width="100" align="center"></el-table-column>
                <el-table-column label="记录日志" property="log_type_name" width="100" align="center"></el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="changeItem(scope.row)" type="text" class="color_blue">修改</el-button>
                        <el-button @click="deleteItemShow(scope.row)" type="text" class="color_blue">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :paginationData="paginationData" @paginationDataNew="paginationDataNew"
                v-if="this.paginationData.totalNum"></pagination>
        </div>
        <!-- -------------------------------- -->
        <!-- 新增dialog -->
        <el-dialog title="菜单管理" :visible.sync="addshow" :close-on-click-modal="false" @close="dialogClose('addForm')">
            <el-form label-width="150px" :model="addForm" :rules="addRules" ref="addForm">
                <el-form-item label="资源名称" prop="resource_name">
                    <el-input maxlength="20" v-model="addForm.resource_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资源url" prop="resource_url">
                    <el-input maxlength="100" v-number-input="addForm.resource_url" v-model="addForm.resource_url"
                        autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证权限" style="text-align:left" prop="check_auth">
                    <el-radio-group v-model="addForm.check_auth">
                        <el-radio label="0">否</el-radio>
                        <el-radio label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="记录日志" style="text-align:left" prop="log_type">
                    <el-radio-group v-model="addForm.log_type">
                        <el-radio label="0">否</el-radio>
                        <el-radio label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addshow = false" size="small">取 消</el-button>
                <el-button type="primary" @click="addcommit" :disabled="this.$store.state.btnType" size="small"
                    class="btn-class">确 定</el-button>
            </div>
        </el-dialog>
        <!-- ------------------------------------ -->
        <!-- 修改dialog -->
        <el-dialog title="菜单管理" :visible.sync="editshow" :close-on-click-modal="false" @close="dialogClose('editForm')">
            <el-form label-width="150px" :model="editForm" :rules="editRules" ref="editForm">
                <el-form-item label="资源名称" prop="resource_name">
                    <el-input maxlength="20" v-model="editForm.resource_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资源url" prop="resource_url">
                    <el-input maxlength="100" v-model="editForm.resource_url" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证权限" style="text-align:left" prop="check_auth">
                    <el-radio-group v-model="editForm.check_auth">
                        <el-radio label="0">否</el-radio>
                        <el-radio label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="记录日志" style="text-align:left" prop="log_type">
                    <el-radio-group v-model="editForm.log_type">
                        <el-radio label="0">否</el-radio>
                        <el-radio label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="editshow = false" size="small">取 消</el-button>
                <el-button type="primary" @click="editcommit" :disabled="this.$store.state.btnType" size="small"
                    class="btn-class">确 定</el-button>
            </div>
        </el-dialog>
        <!-- ------------------------------------ -->
    </div>
</template>
<script>
import * as api from "@/http/admin-api.js";
import pagination from "@/comon/components/pagination.vue";
export default {
    components: {
        pagination
    },
    props: ["treeId"],
    data() {
        return {
            tableList: [],
            tableId: "",
            paginationData: {
                pageNum: "",
                pageSize: "",
                totalNum: ""
            },
            addshow: false,
            addForm: {
                resource_name: "",
                resource_url: "",
                menu_id: "",
                check_auth: "1",
                log_type: "1"
            },
            addRules: {
                resource_name: [
                    {
                        required: true,
                        message: "请填写资源名称",
                        trigger: "blur"
                    }
                ],
                resource_url: [
                    {
                        required: true,
                        message: "请输入资源url",
                        trigger: "blur"
                    }
                ],
                check_auth: [
                    {
                        required: true,
                        message: "请选择是否验证权限",
                        trigger: "change"
                    }
                ],
                log_type: [
                    {
                        required: true,
                        message: "请选择是否记录日志",
                        trigger: "change"
                    }
                ]
            },
            flag: true,
            editshow: false,
            editForm: {
                resource_name: "",
                resource_url: "",
                menu_id: "",
                check_auth: "",
                log_type: "",
                resource_id: ""
            },
            editRules: {
                resource_name: [
                    {
                        required: true,
                        message: "请填写资源名称",
                        trigger: "blur"
                    }
                ],
                resource_url: [
                    {
                        required: true,
                        message: "请输入资源url",
                        trigger: "blur"
                    }
                ],
                check_auth: [
                    {
                        required: true,
                        message: "请选择是否验证权限",
                        trigger: "change"
                    }
                ],
                log_type: [
                    {
                        required: true,
                        message: "请选择是否记录日志",
                        trigger: "change"
                    }
                ]
            }
        };
    },

    methods: {
        // 获取table
        getUrlsByMenuId() {
            api.getUrlsByMenuId({
                menu_id: this.tableId,
                pageNum: this.paginationData.pageNum,
                pageSize: this.paginationData.pageSize
            }).then(res => {
                if (res) {
                    this.tableList = res.bus_json.items;
                    this.paginationData.pageNum = res.bus_json.pageNum;
                    this.paginationData.pageSize = res.bus_json.pageSize;
                    this.paginationData.totalNum = res.bus_json.totalNum;
                }
            });
        },
        //  table新增按钮点击
        addItem() {
            this.addForm = {
                resource_name: "",
                resource_url: "",
                menu_id: "",
                check_auth: "1",
                log_type: "1"
            };
            if (this.tableId) {
                this.addshow = true;
            }
        },
        // 分页器公共方法
        paginationDataNew(sth) {
            this.paginationData = sth;
            this.getUrlsByMenuId();
        },
        // 新增资源提交
        addcommit() {
            this.$refs["addForm"].validate(valid => {
                if (valid) {
                    if (this.flag) {
                        api.menuUrlsTableAddCommit({
                            resource_id: "",
                            resource_name: this.addForm.resource_name,
                            resource_url: this.addForm.resource_url,
                            menu_id: this.tableId,
                            check_auth: this.addForm.check_auth,
                            log_type: this.addForm.log_type
                        }).then(res => {
                            if (res) {
                                this.addshow = false;
                                this.$message({
                                    message: res.error_msg,
                                    type: "success"
                                });
                                this.getUrlsByMenuId();
                                setTimeout(() => {
                                    this.flag = true;
                                }, 1500);
                            }
                        });
                    }
                }
            });
        },
        // 所有关闭dialog的清除验证的回调
        dialogClose(formName) {
            this.$nextTick(() => {
                this.$refs[formName].resetFields();
            });
        },
        // table内点击修改弹窗
        changeItem(sth) {
            this.editForm = {
                resource_name: "",
                resource_url: "",
                menu_id: "",
                check_auth: "",
                log_type: "",
                resource_id: ""
            };
            api.getUrlInfoByResourceId({
                resource_id: sth.resource_id
            }).then(res => {
                if (res) {
                    this.editForm = {
                        resource_name: res.bus_json.resource_name,
                        resource_url: res.bus_json.resource_url,
                        menu_id: res.bus_json.menu_id,
                        check_auth: res.bus_json.check_auth,
                        log_type: res.bus_json.log_type,
                        resource_id: res.bus_json.resource_id
                    };
                    this.editshow = true;
                }
            });
        },
        // menuTable修改dialog提交
        editcommit() {
            this.$refs["editForm"].validate(valid => {
                if (valid) {
                    if (this.flag) {
                        api.menuUrlsTableAddCommit({
                            resource_id: this.editForm.resource_id,
                            resource_name: this.editForm.resource_name,
                            resource_url: this.editForm.resource_url,
                            menu_id: this.tableId,
                            check_auth: this.editForm.check_auth,
                            log_type: this.editForm.log_type
                        }).then(res => {
                            if (res) {
                                this.editshow = false;
                                this.$message({
                                    message: res.error_msg,
                                    type: "success"
                                });
                                this.getUrlsByMenuId();
                                setTimeout(() => {
                                    this.flag = true;
                                }, 1500);
                            }
                        });
                    }
                }
            });
        },
        // 删除menuTable的一项
        deleteItemShow(sth) {
            this.$confirm("确认删除该数据？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    api.delUrl({
                        resource_id: sth.resource_id
                    }).then(res => {
                        if (res) {
                            this.$message({
                                type: "success",
                                message: res.error_msg
                            });
                            this.getUrlsByMenuId();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "未删除"
                    });
                });
        }
    },
    created() { },
    mounted() { },
    watch: {
        treeId(val) {
            (this.paginationData = {
                pageNum: "1",
                pageSize: "10",
                totalNum: ""
            }),
                (this.tableId = val);
            this.getUrlsByMenuId();
        }
    }
};
</script>
<style lang='scss'>
.menu_table {
    .btnContainer {
        text-align: right;
        margin: 20px;
    }

    .tableContainer {
        width: 100%;

        el-table {
            width: 100%;
        }
    }

    .color_green {
        color: #009788;
    }

    .color_red {
        color: red;
    }
}
</style>


